.app-title {
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.3px;
}

// ? Adjust this `translateX` value to keep logo in center when vertical nav menu is collapsed (Value depends on your logo)
.app-logo {
  transition: all 0.18s ease-in-out;
  .v-navigation-drawer--mini-variant & {
    transform: translateX(-4px);
  }
}

// @include theme(app-navigation-menu) using ($material) {
//   background-color: map-deep-get($material, 'background');
// }

.app-navigation-menu {
  background-color: transparent;
  .vertical-nav-menu-items {
    background-color: transparent;
    .vertical-nav-menu-link {
      &.v-list-item--active {
        color: white;
        background: linear-gradient(98deg, #039be5, #0277bd 94%);
      }
    }
  }
  .v-list-item {
    &.vertical-nav-menu-link {
      ::v-deep .v-list-item__icon {
        .v-icon {
          transition: none !important;
        }
      }
    }
  }
  .upgrade-banner {
    position: absolute;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.boxed-container {
  max-width: 1440px;
  margin-left: auto;
}

.vt-line {
  margin: 1rem;
  height: 2px;
  width: auto;
  border-bottom: 2px solid #96969650;
}
